<template>
  <div>
    <h1>后台管理系统</h1>
    <el-form label-width="auto" :model="ruleForm" :rules="rules">
      <el-form-item prop="username">
        <el-input size="medium" clearable v-model="ruleForm.username">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          size="medium"
          show-password
          clearable
          v-model="ruleForm.password"
        >
          <i slot="prefix" class="el-input__icon el-icon-key"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-button-login"
          @click="Login('ruleForm')"
          >登录</el-button
        >
      </el-form-item>
      <el-form-item>
        <p class="register" @click="this.$listeners.change">点我进行注册</p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from "@/api/api.js";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            max: 12,
            min: 6,
            message: "用户名长度最少6位最多12位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            max: 12,
            min: 6,
            message: "密码长度最少6位最多12位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    Login(ruleForm) {
      this.axios(
        "http://localhost:3082/login",
        {
          username: this.ruleForm.username,
        },
        (data) => {
          console.log(data);
        }
      );
    },
  },
};
</script>
<style scoped>
h1 {
  color: #fff;
  margin-bottom: 30px;
}
p {
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.el-input--prefix .el-input__inner {
  height: 47px;
  line-height: 47px;
  background-color: #304156;
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  color: #fff;
}
.el-input--medium .el-input__icon {
  font-size: 14px;
}
.el-form-item.is-error .el-input__inner {
  border: none;
}
.el-button-login {
  width: 100%;
}
</style>